<%@ page contentType="text/html;charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>职工管理系统</title><meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
   <%-- <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>--%>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header navbar-center">
                    <a class="navbar-brand" href="#">&nbsp;职工管理系统&nbsp;</a>
                </div>
                <div>
                    <ul class="nav navbar-nav">
                        <li class="firstpage" style="background-color: #e7e7e7">
                            <a href="#">&nbsp;首页&nbsp;</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">&nbsp;请假</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                &nbsp;设置 <b class="caret"></b>
                            </a>
                        </li>
                    </ul>
                    <!--向右对齐-->
                    <form class="navbar-form navbar-right" role="search">
                        <button style="outline: none;display: block" id="login" type="button" data-toggle="modal" data-target="#myModal-login" class="btn btn-info">登录</button>
                    </form>
                    <p class="navbar-text navbar-right" id="admin-tip"></p>
                </div>
            </div>
        </nav>
    </div>
</div>
</div>
<div class="container-full">
    <iframe class="iframe" id="iframe1" src="http://localhost:8080/web/picture.jsp" style="width: 100%;height: 763px;position: absolute;top: 50px;outline: none;display: block"></iframe>
</div>
<%--登录框--%>
<div class="modal fade" id="myModal-login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 450px;position: absolute;top: 160px;left: 35%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h2 style="text-align: center" class="modal-title" id="myModalLabel">登录</h2>
            </div>
            <br>
            <div class="modal-body" align="center">
                <form id="login-form" action="${pageContext.request.contextPath}/admin/login" method="post">
                    <div class="mb-3">
                        <input style="width: 310px;height: 42px" type="text" class="form-control" id="account" name="account"placeholder="账号" required>
                    </div>
                    <br>
                    <div class="mb-3">
                        <input style="width: 310px;height: 42px" type="password" class="form-control" id="passsword" name="password" placeholder="密码" required>
                    </div>
                </form>
            </div>
            <br>
                <button style="position: absolute;left: 78px;top: 250px;width: 288px;height: 42px;font-size: 16px;border-radius: 20px;outline: none"  type="button" id="login-submit" class="btn btn-info">登录</button>
            <br><br><br><br>
        </div>
    </div>
</div>

<div style="position: absolute;left: 600px;margin-top: 100px;z-index: 1051">
    <div class="alert alert-info" id="info" style="width: 300px;text-align: center;display: none"></div>
</div>

<div style="position: absolute;left: 600px;margin-top: 100px;z-index: 1051">
    <div id="success" class="alert alert-success" style="width: 300px;text-align: center;display: none"></div>
</div>

<div style="position: absolute;left: 600px;margin-top: 100px;z-index: 1051">
    <div id="danger" class="alert alert-danger" style="width: 300px;text-align: center;display: none"></div>
</div>


</body>
<script>
    if(${back==true}){
        $('#success').text('账号已安全退出')
        $("#success").fadeToggle("slow")
        setTimeout(function (){
            $("#success").fadeToggle("slow")
        },2000)
    }

    //点击不同导航栏出现阴影效果、并进行页面切换
    let dropdown=document.getElementsByClassName("dropdown")
    for (let i = 0; i < dropdown.length; i++) {
        dropdown[i].onclick=function (){
            $('.firstpage').css("background-color","#f8f7f7")
            $('#info').text('请先进行登录')
            setTimeout(function (){
                $("#info").fadeToggle("slow")
            },200)
            setTimeout(function (){
                $("#info").fadeToggle("slow")
            },2200)
            $('#myModal-login').modal('show')
        }
    }
    $('.firstpage').click(function (){
        $('.firstpage').css("background-color","#e7e7e7")
        $('.iframe').hide()
        $('#iframe1').show()
    })

    //登陆验证密码
    $('#login-submit').click(function (){
        if($('#account').val()==""||$('#passsword').val()==""){
            $("#danger").text('请完善信息')
            $("#danger").fadeToggle("slow")
            setTimeout(function (){
                $("#danger").fadeToggle("slow")
            },2000)
        }else {
            $.post("${pageContext.request.contextPath}/admin/login",
                {account:$('#account').val(),password:$('#passsword').val()},
                function (data){
                    if(data=="false"){
                        $("#danger").text('账号或密码错误')
                        $("#danger").fadeToggle("slow")
                        setTimeout(function (){
                            $("#danger").fadeToggle("slow")
                        },2000)
                    }else {
                        $('#login-form').submit()
                    }
                }
            )
        }
    })
</script>
</html>
